<template>
  <!-- vuex:===>pinia
           作用：公共数据管理
           使用：
              state:{
                // 共享数据
              },
              mutations:{
                // 修改state数据,只是用于同步修改
              },
              actions:{
                // 用于异步操作，但是要修改state还得通过mutations
              },
              getters:{
                // state的计算属性
              },
              modules:{
                user:{
                  namespaced:true
                  state:{
                    aaa:1
                    // this.$store.state.user.aaa
                  },
                  mutations:{
                    setAaa(){}
                    // this.$store.commit('user/setAaa')
                  },
                  actions:{
                    updateAaa(){}
                    // this.$store.dispatch("user/updateAaa",实参值)
                  },
                  getters:{
                    getAaa(){}
                    // this.$store.getters['user/getAaa']
                  }
                },
                xxx:{
                  namespaced:true,
                  state:{
                    aaa:1
                  },
                  mutations:{
                    setAaa(){}
                  }
                }
              }
 -->
  <div>
    <!--  -->
    <hr />
    <h1>user模块</h1>
    <h2>{{ $store.state.user.username }}</h2>
    <button @click="$store.commit('user/SETUSERNAME', '李四')">
      修改username调用mutations
    </button>
    <button @click="$store.dispatch('user/updateUsername', '王五')">
      调用actions
    </button>
    <h2>{{ $store.getters['user/getUsername'] }}</h2>
    <hr />
    <h1>home模块</h1>
    <h2>{{ $store.state.home.title }}</h2>
    <hr />
    <h2>map使用</h2>
    <h1>{{ username }}</h1>
    <h1>{{ getUsername }}</h1>
    <button @click="SETUSERNAME('李四')">调用user下的mutations</button>
    <button @click="xxx('李四')">调用user下的actions</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('user', ['username', 'name']),
    ...mapGetters('user', ['getUsername'])
  },
  methods: {
    ...mapMutations('user', ['SETUSERNAME']),
    // ...mapActions('user', ['updateUsername']),
    ...mapActions('user', { xxx: 'updateUsername' }),
    updateUsername () {}
  }
}
</script>
<style></style>
